feat(frontend): show estimated end date/time preview in CreateStreamF…#185
Merged
ritik4ever merged 2 commits intoApr 28, 2026
Merged
Conversation
|
@Danielodingz is attempting to deploy a commit to the ritik4ever's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@Danielodingz Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
Contributor
Author
|
Hey @ritik4ever please check PR and merge, Thanks |
📝 WalkthroughWalkthroughA single React form component is updated to calculate and display a dynamic UTC end-time estimate based on user-provided start offset and duration values. New dedicated form controls are introduced for "Duration (hours)" and "Start In (minutes)" with validation constraints, accessibility wiring, and numeric input restrictions. Changes
Sequence DiagramsequenceDiagram
participant User
participant Form as Form Component
participant Calculator as Date Calculator
participant Display as UI Display
User->>Form: Enters start offset (minutes)
Form->>Form: Validates input
User->>Form: Enters duration (hours)
Form->>Form: Validates input & checks both present
Form->>Calculator: Passes startAt + durationSeconds
Calculator->>Calculator: Calculate end date/time
Calculator->>Calculator: Format with Intl.DateTimeFormat
Calculator-->>Form: Returns estimatedEndLabel
Form->>Display: Renders "Ends: [UTC date/time]"
Display-->>User: Shows estimated end time preview
Note over User,Display: Updates on every keystroke<br/>Clears if either field becomes empty/invalid
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Author
|
Hey @ritik4ever please conflict has been resolved, please merge thanks. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/src/components/CreateStreamForm.tsx`:
- Around line 409-412: The JSX conditional for errors.startInMinutes in
CreateStreamForm is left unclosed and the old "Duration & Start In Minutes"
block remains, causing unbalanced JSX and duplicate IDs (stream-duration /
stream-start); close the conditional branch properly (close the span and the
surrounding conditional block that started with {errors.startInMinutes && ( ...
)}) where the error span is rendered, and remove the stale duplicate "Duration &
Start In Minutes" row (the duplicate DOM containing ids stream-duration and
stream-start) so only the new, balanced start/duration fields remain.
- Around line 171-172: The form contract in useFormValidation is still only
defining durationMinutes so values.durationHours, errors.durationHours and
set("durationHours") in CreateStreamForm are left undefined/unvalidated and
handleSubmit still posts values.durationMinutes; update the validation/form
state to include durationHours (add durationHours to the values/defaults,
validate it like durationMinutes but in hours and ensure errors.durationHours is
set), change handleSubmit to use the canonical field (either compute
durationMinutes = durationHours * 60 or post durationHours consistently), and
update any preview/end-time computation to read from values.durationHours so the
submitted payload and preview match (look for references to durationMinutes,
values.durationHours, errors.durationHours, set("durationHours"), and
handleSubmit).
- Around line 174-181: The current validation in CreateStreamForm clears preview
only for invalid durationHours; extend that guard to also treat startInMinutes
as invalid when it's negative or non-integer so estimatedEndLabel is cleared in
those cases. Update the if condition that checks values.startInMinutes,
startInMinsNum, durationHoursNum (the block that decides whether to render
estimatedEndLabel) to include startInMinsNum < 0 ||
!Number.isInteger(startInMinsNum) (in addition to the existing empty/isNaN
checks) so pasting "-5" or "1.5" into startInMinutes causes the preview to be
cleared.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3ede09e1-b1f9-4222-9737-56d88998b43d
📒 Files selected for processing (1)
frontend/src/components/CreateStreamForm.tsx
Comment on lines
+174
to
+181
| if ( | ||
| values.startInMinutes === "" || | ||
| values.durationHours === "" || | ||
| isNaN(startInMinsNum) || | ||
| isNaN(durationHoursNum) || | ||
| durationHoursNum < 1 || | ||
| !Number.isInteger(durationHoursNum) | ||
| ) { |
There was a problem hiding this comment.
Clear the preview when startInMinutes is invalid too.
This guard only rejects invalid durationHours. If a user pastes -5 or 1.5 into Line 394, estimatedEndLabel still renders instead of clearing, which misses the “clear when either field is empty or invalid” requirement.
Suggested fix
if (
values.startInMinutes === "" ||
values.durationHours === "" ||
isNaN(startInMinsNum) ||
isNaN(durationHoursNum) ||
+ startInMinsNum < 0 ||
+ !Number.isInteger(startInMinsNum) ||
durationHoursNum < 1 ||
!Number.isInteger(durationHoursNum)
) {
return null;
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/src/components/CreateStreamForm.tsx` around lines 174 - 181, The
current validation in CreateStreamForm clears preview only for invalid
durationHours; extend that guard to also treat startInMinutes as invalid when
it's negative or non-integer so estimatedEndLabel is cleared in those cases.
Update the if condition that checks values.startInMinutes, startInMinsNum,
durationHoursNum (the block that decides whether to render estimatedEndLabel) to
include startInMinsNum < 0 || !Number.isInteger(startInMinsNum) (in addition to
the existing empty/isNaN checks) so pasting "-5" or "1.5" into startInMinutes
causes the preview to be cleared.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #163
[wave4][frontend] Show estimated end date/time preview in CreateStreamForm
Summary
As the user fills in the Duration (hours) and Start In (minutes) fields, the form now computes and displays a real-time estimated end date/time preview directly below the duration input.
Changes
File:
frontend/src/components/CreateStreamForm.tsxdurationHoursinput field (existed in state and validation but was not rendered in the JSX).estimatedEndLabelcomputed value (inline IIFE, no hooks) that derives the estimated end timestamp fromstartAt + durationSeconds.<span className="field-hint">witharia-live="polite"below the duration input — clears automatically when either field is empty or invalid.Acceptance Criteria
startAt + durationSecondsin real timeEnds: Apr 30, 2026 at 14:32 UTCIntl.DateTimeFormat— no external date libraryNotes
startAtderivation mirrors the existing logic inhandleSubmitexactly.Summary by CodeRabbit
New Features
Improvements